'use client' import { useState, useEffect } from 'react' import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { PlugIcon as Slot } from 'lucide-react' const meals = [ { title: "Meal 1: Turkey Bowl", description: "1 cup 93% lean ground turkey (protein) + 1 cup sauteed spinach (veggie/carb) + drizzle of tahini or oil (fat) + ⅓ cup roasted potatoes" }, { title: "Meal 2: Shredded Chicken Salad", description: "1 cup pre-shredded chicken (protein) + ½ cup chickpeas (carbs / protein) + ½ avocado (fat) + lettuce (veggie / carbs)" }, { title: "Meal 3: Healthy Pizza Crust", description: "1 cup Greek yogurt (protein) + 1.5 cups gluten-free oat flour aka blended oats (carb) + 3 tsp baking powder optional, but recommended for taste: 1/4 tsp salt, 1/4 tsp pepper, dashes of Italian seasonings (oregano, garlic powder, etc.) - decide your addons!" }, { title: "Meal 4: Chicken Wrap", description: "1 cup shredded chicken (protein) + ½ avocado, sliced (fat) + 1 tbsp hummus / dip (carb) + handful Lettuce or spinach leaves, handful (carb / veggie) + Mustard + Ezekiel wrap x1 (carbs)" }, { title: "Meal 5: Tuna Sandy", description: "1 can wild caught tuna (protein) + 2 tbsp greek yogurt (protein) + mustard + salt/pepper + 1 large carrot, chopped (carb / veggie) + 1 rice cake or slice toast (carb) + 2 tbsp dip - hummus, bitchin' sauce (carb/fat)" }, { title: "Meal 6: Probiotic Beef Bowl", description: "1 cup ground beef (protein) + taco seasoning, Siete brand + ¼ cup sauerkraut (carb / veggie probiotic) + 1 tbsp raw cheddar cheese, Raw Farms brand (fat) + ¼ avocado (fat)" } ] export default function Component() { const [currentMeal, setCurrentMeal] = useState(meals[0]) const [isSpinning, setIsSpinning] = useState(false) const spinWheel = () => { setIsSpinning(true) const spinDuration = 3000 // 3 seconds const intervalDuration = 100 // 0.1 seconds let elapsed = 0 const interval = setInterval(() => { setCurrentMeal(meals[Math.floor(Math.random() * meals.length)]) elapsed += intervalDuration if (elapsed >= spinDuration) { clearInterval(interval) setIsSpinning(false) } }, intervalDuration) } useEffect(() => { // Clean up the interval on component unmount return () => clearInterval() }, []) return ( Meal Spinner Spin for a random meal idea!

{currentMeal.title}

{currentMeal.description}

) }